<!DOCTYPE html>
<html lang="en" class="igv-app-html">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta http-equiv=“Pragma” content=”no-cache”>
    <meta http-equiv=“Expires” content=”-1″>
    <meta http-equiv=“CACHE-CONTROL” content=”NO-CACHE”>

    <title>IGV</title>

    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>

    <!-- Font Awesome -->
    <link rel="stylesheet" href="css/fontawesome/all.css">

    <!-- Bootstrap 4 CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

    <!-- DataTables CSS -->
    <link rel="stylesheet" href="https://cdn.datatables.net/v/dt/dt-1.10.20/sl-1.3.1/datatables.min.css">

    <!-- APP CSS -->
    <link rel="stylesheet" href="css/app.css">

    <!-- IGV JS-->
<!--    <script src="https://cdn.jsdelivr.net/npm/igv@2.6.2/dist/igv.min.js"></script>-->
    <script src="https://igv.org/web/snapshot/dist/igv.min.js"></script>

    <!-- FOR DEVELOPMENT ONLY -->
<!--    <script src="node_modules/igv/dist/igv.js"></script>-->

    <!-- Dropbox Chooser API-->
    <script id="dropboxjs" src="https://www.dropbox.com/static/api/2/dropins.js" data-app-key="8glijwyao9fq8we"></script>

    <!-- Bootstrap 4 and Dependancies -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

    <!-- Datatables JS -->
    <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.20/sl-1.3.1/datatables.min.js"></script>

    <!-- Google Platform JS -->
    <script src="https://apis.google.com/js/platform.js"></script>

    <!-- Twitter -->
    <script src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

    <script type="text/javascript" src="igvwebConfig.js"></script>

    <script type="module" src="js/app.js"></script>

</head>

<body class="igv-app-body-footerized">

<nav class="navbar fixed-top py-0 navbar-expand-sm navbar-dark justify-content-between">

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#igv-app-navbar-navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div id="igv-app-navbar-navigation" class="collapse navbar-collapse">
        <ul class="navbar-nav">

            <!-- Genome -->
            <li class="nav-item px-3">
                <div class="dropdown">

                    <a id="igv-app-genome-dropdown-button" class="dropdown-toggle" href="#" data-toggle="dropdown">
                        Genome
                    </a>

                    <div id="igv-app-genome-dropdown-menu" class="dropdown-menu">

                        <div id="igv-app-genome-dropdown-divider" class="dropdown-divider"></div>

                        <!-- local file -->
                        <label class="dropdown-item btn btn-default btn-file">
                            <div class="igv-app-dropdown-item-cloud-storage">
                                <div>
                                    Local File ...
                                </div>
                                <div>
                                    <input id="igv-app-dropdown-local-genome-file-input" type="file" name="file"
                                           multiple style="display: none;">
                                </div>
                            </div>
                        </label>

                        <!-- Dropbox -->
                        <div class="dropdown-item">

                            <div id="igv-app-dropdown-dropbox-genome-file-button" class="igv-app-dropdown-item-cloud-storage">

                                <div>Dropbox</div>
                                <div><img id="igv-app-genome-dropbox-button-image" width="18" height="18"></div>
                                <div>...</div>

                            </div>

                        </div>

                        <!-- Google Drive -->
                        <div class="dropdown-item">
                            <div id="igv-app-dropdown-google-drive-genome-file-button" class="igv-app-dropdown-item-cloud-storage">
                                <div>Google Drive</div>
                                <div><img id="igv-app-genome-google-drive-button-image" width="18" height="18"></div>
                                <div>...</div>
                            </div>
                        </div>

                        <!-- URL -->
                        <button class="dropdown-item" type="button" data-toggle="modal" data-target="#igv-app-genome-from-url-modal">URL ...
                        </button>

                    </div>

                </div>

            </li>

            <!-- Tracks -->
            <li class="nav-item px-3">
                <div id="igv-app-track-dropdown" class="dropdown">

                    <a id="igv-track-dropdown-button" class="dropdown-toggle" href="#" data-toggle="dropdown">
                        Tracks
                    </a>

                    <div id="igv-app-track-dropdown-menu" class="dropdown-menu">

                        <!-- local file -->
                        <label class="dropdown-item btn btn-default btn-file">
                            <div class="igv-app-dropdown-item-cloud-storage">
                                <div>
                                    Local File ...
                                </div>
                                <div>
                                    <input id="igv-app-dropdown-local-track-file-input" type="file" name="file" multiple style="display: none;">
                                </div>
                            </div>
                        </label>

                        <!-- Dropbox -->
                        <div class="dropdown-item">
                            <div id="igv-app-dropdown-dropbox-track-file-button" class="igv-app-dropdown-item-cloud-storage">
                                <div>Dropbox</div>
                                <div><img id="igv-app-track-dropbox-button-image" width="18" height="18"></div>
                                <div>...</div>
                            </div>
                        </div>

                        <!-- Google Drive -->
                        <div class="dropdown-item">
                            <div id="igv-app-dropdown-google-drive-track-file-button" class="igv-app-dropdown-item-cloud-storage">
                                <div>Google Drive</div>
                                <div><img id="igv-app-track-google-drive-button-image" width="18" height="18"></div>
                                <div>...</div>
                            </div>
                        </div>

                        <!-- URL -->
                        <button class="dropdown-item" type="button" data-toggle="modal" data-target="#igv-app-track-from-url-modal">
                            URL ...
                        </button>

                        <div id="igv-app-annotations-section" class="dropdown-divider">
                        </div>

                    </div>
                </div>
            </li>

            <!-- Session -->
            <li class="nav-item px-3">
                <div class="dropdown">

                    <a id="igv-app-session-dropdown-button" class="dropdown-toggle" href="#" data-toggle="dropdown">
                        Session
                    </a>

                    <div id="igv-session-dropdown-menu" class="dropdown-menu">

                        <!-- Load local session file -->
                        <label class="dropdown-item btn btn-default btn-file">
                            <div class="igv-app-dropdown-item-cloud-storage">
                                <div>
                                    Local File ...
                                </div>
                                <div>
                                    <input id="igv-app-dropdown-local-session-file-input" type="file" name="file"
                                           style="display: none;">
                                </div>
                            </div>
                        </label>

                        <!-- Dropbox -->

                        <!-- Google Drive -->

                        <!-- Session URL -->
                        <button class="dropdown-item" type="button" data-toggle="modal" data-target="#igv-app-session-url-modal">
                            Load URL ...
                        </button>

                        <div class="dropdown-divider"></div>

                        <!-- Save local session file -->
                        <button class="dropdown-item" type="button" data-toggle="modal" data-target="#igv-app-session-save-modal">
                            Save ...
                        </button>

                    </div>

                </div>
            </li>

            <!-- Share (generate URL) -->
            <li class="nav-item px-3">
                <div>
                    <a href="#" data-toggle="modal" data-target="#igv-app-share-modal">
                        Share
                    </a>
                </div>
            </li>

            <!-- Bookmark -->
            <li class="nav-item px-3">
                <div>
                    <a id="igv-app-bookmark-button" href="#">
                        Bookmark
                    </a>
                </div>
            </li>

            <!-- Save SVG -->
            <li class="nav-item px-3">
                <div>
                    <a href="#" data-toggle="modal" data-target="#igv-app-svg-save-modal">
                        Save SVG
                    </a>
                </div>
            </li>

        </ul>
    </div>

    <ul class="navbar-nav">
        <li class="nav-item">
            <a href="https://igvteam.github.io/igv-webapp/" target="_blank">
                Help
            </a>
        </li>
    </ul>


</nav>

<main id="igv-main" role="main" class="container-fluid">

    <!-- App container -->
    <div class="row">
        <div class="col-sm">
            <div id="igv-app-container">

                <!-- alert panel -->
                <div id="igv-webapp-alertpanel" class="card">

                    <div class="card-body">

                        <div class="igv-webapp-panel-drag-container">
                            <i class="fas fa-square-full"></i>
                            <i class="fas fa-sm fa-grip-horizontal"></i>
                            <i class="fas fa-times-circle"></i>
                        </div>

                        <div id="igv-webapp-alert-panel-content-container">
                        </div>

                    </div>

                </div>

            </div>
        </div>
    </div>

    <!-- Share URL Modal -->
    <div id="igv-app-share-modal" class="modal fade">

        <div class="modal-dialog">

            <div class="modal-content">

                <div class="modal-header">
                    <div id="igv-app-share-input-modal-close-button" class="modal-title">Share</div>

                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>

                </div>

                <div class="modal-body">
                    <div class="container-fluid">

                        <!-- copy url -->
                        <div class="row">
                            <div class="col-sm-8">
                                <div class="form-group">
                                    <input id="igv-app-share-input" type="text" class="form-control" placeholder="">
                                </div>
                            </div>
                            <div class="col-sm-2">
                                <button id="igv-app-copy-link-button" type="button" class="btn btn-sm btn-default">
                                    COPY
                                </button>
                            </div>
                        </div>

                        <!-- social buttons -->
                        <div class="igv-app-social-button-container">

                            <div id="igv-app-tweet-button-container">
                                <a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button"
                                   data-show-count="false">TWEET</a>
                            </div>

                            <div>
                                <a id="igv-app-email-button" href="mailto:?body=https://aidenlab.org/juicebox">EMAIL</a>
                            </div>

                            <div id="igv-app-embed-button">EMBED</div>

                            <div id="igv-app-qrcode-button">QR CODE</div>

                        </div>

                        <!-- qr code image -->
                        <div class="row justify-content-center">
                            <div id="igv-app-qrcode-image" class="col-4"></div>
                        </div>

                        <!-- embed widget -->
                        <div id="igv-app-embed-container" class="row">
                            <div class="col-sm-9 form-group">
                                <textarea class="form-control" rows="4"></textarea>
                            </div>
                            <div class="col-sm-3">
                                <button type="button" class="btn btn-default">COPY</button>
                            </div>
                        </div>

                    </div>
                </div>

            </div>

        </div>

    </div>

    <!-- SVG save -->
    <div id="igv-app-svg-save-modal" class="modal fade igv-app-file-save-modal">

        <div class="modal-dialog modal-lg">

            <div class="modal-content">

                <div class="modal-header">

                    <div id="igv-app-svg-save-modal-label" class="modal-title">
                        <div>
                            Save SVG File
                        </div>
                    </div>

                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-body">
                    <input class="form-control" type="text" placeholder="igv-app.svg">

                    <div>
                        Enter filename with .svg suffix
                    </div>

                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-sm btn-outline-secondary" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-sm btn-secondary">OK</button>
                </div>

            </div>

        </div>

    </div>

</main>

<footer class="igv-app-footer">

    <div>
        <a href="https://igv.org" target="_blank">
            <img src="img/igv-logo-cooked-40x40.png" width="32" height="32">&nbsp;&nbsp;igv.org
        </a>
    </div>

    <div>
        <div>
            <div id="igv-app-ucsd-logo">
                <a href="https://ucsd.edu/" target="_blank" title="University of California at San Diego">
                    <img src="img/ucsd-logo.svg" width="123" height="24" alt="University of California at San Diego">
                </a>
            </div>
            <div id="igv-app-broad-logo">
                <a href="https://www.broadinstitute.org" target="_blank" title="Broad Institute home page">
                    <img src="img/broad-institute-logo.svg" width="95" height="24" alt="Broad Institute logo">
                </a>
            </div>
        </div>
    </div>

</footer>

</body>

</html>
